<template>
  <div class="car-models">
    <Manage>
      <template #upCard>
        <el-form label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="车型编号">
                <el-input v-model="truckType.id" placeholder="请输入车型编号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="应载重量">
                <el-select v-model="truckType.allowableLoad" style="width:100%" clearable>
                  <el-option
                    v-for="item in setMap.allowWeight"
                    :key="item.id"
                    :label="item.label"
                    :value="'RANGE_LEVEL_'+item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="应载体积">
                <el-select v-model="truckType.allowableVolume" style="width:100%" clearable>
                  <el-option
                    v-for="item in setMap.allowVolume"
                    :key="item.id"
                    :label="item.label"
                    :value="'RANGE_LEVEL_'+item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆类型">
                <el-input placeholder="请输入车型编号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" size="" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #downCard>
        <el-button type="primary" style="margin-bottom:20px" @click="handleDialog">新增车型</el-button>
        <el-table v-loading="loading" :data="truckTypeList" stripe :header-cell-style="{background:'#f8faff',color:'#818693'}">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="id" label="车型编号" />
          <el-table-column prop="name" label="车辆类型" />
          <el-table-column prop="num" label="车型数量" />
          <el-table-column prop="allowableLoad" label="应载重量(吨)" />
          <el-table-column prop="allowableVolume" label="应载体积(立方米)" />
          <el-table-column prop="measureLong" label="长(米)" />
          <el-table-column prop="measureWidth" label="宽(米)" />
          <el-table-column prop="measureHigh" label="高(米)" />
          <el-table-column label="操作">
            <template #default="{row}">
              <a href="javascript:void(0);" style="color:#419eff;" @click="editTruck(row.id)">编辑</a>
              <div class="line" />
              <a href="javascript:void(0);" style="color:#f56c6c;" @click="delTruck(row.id)">删除</a>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </template>
    </Manage>
    <!-- 弹层 -->
    <el-dialog :title="truckTypeForm.id?'编辑车型':'新增车型'" :visible.sync="showDialog" @close="close">
      <el-form ref="truckTypeForm" label-width="100px" :model="truckTypeForm" :rules="rules">
        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="truckTypeForm.name" placeholder="请输入车辆类型" />
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input v-model.number="truckTypeForm.allowableLoad" placeholder="请输入应载重量" />
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model.number="truckTypeForm.allowableVolume" placeholder="请输入应载体积" />
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input v-model.number="truckTypeForm.measureLong" placeholder="请输入长" />
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input v-model.number="truckTypeForm.measureWidth" placeholder="请输入宽" />
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input v-model.number="truckTypeForm.measureHigh" placeholder="请输入高" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="close">取 消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import setMap from '@/constant/setMap'
import { addTruckType, delTruckType, editTruckType, getDetailType, initTruckType } from '@/api/transit'
export default {
  data() {
    return {
      setMap,
      page: {
        page: 1,
        pageSize: 10
      },
      counts: 0,
      truckTypeList: [],
      truckType: {
        id: null,
        allowableLoad: null,
        allowableVolume: null,
        name: null
      },
      loading: false,
      showDialog: false,
      truckTypeForm: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: 0.0,
        measureWidth: 0.0,
        measureHigh: 0.0
      },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        allowableLoad: [{ required: true, message: '不能为空', trigger: 'blur' }],
        allowableVolume: [{ required: true, message: '不能为空', trigger: 'blur' }],
        measureLong: [{ required: true, message: '不能为空', trigger: 'blur' }],
        measureWidth: [{ required: true, message: '不能为空', trigger: 'blur' }],
        measureHigh: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getTruckType()
  },
  methods: {
    // 获取车辆类型分页shuju
    async getTruckType(params = this.page) {
      this.loading = true
      const res = await initTruckType(params)
      // console.log(res)
      this.truckTypeList = res.items
      this.counts = +res.counts
      this.loading = false
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTruckType()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.getTruckType()
    },
    // 搜索车辆类型
    async search() {
      this.getTruckType({ ...this.page, ...this.truckType })
    },
    // 重置
    reset() {
      this.truckType = {
        id: null,
        allowableLoad: null,
        allowableVolume: null,
        name: null
      }
      this.getTruckType()
    },
    // 新增弹层
    handleDialog() {
      this.showDialog = true
    },
    // 提交
    async submit() {
      await this.$refs.truckTypeForm.validate()
      if (this.truckTypeForm.id) {
        await editTruckType(this.truckTypeForm)
        this.$message.success('更新成功')
      } else {
        await addTruckType(this.truckTypeForm)
        this.$message.success('新增成功')
      }
      this.getTruckType()
      this.close()
    },
    // 删除
    async delTruck(id) {
      await this.$confirm('确定删除嘛？')
      await delTruckType(id)
      this.$message.success('删除成功')
      this.getTruckType()
    },
    // 编辑
    async editTruck(id) {
      const res = await getDetailType(id)
      // console.log(res)
      this.truckTypeForm = res
      this.showDialog = true
    },
    close() {
      this.truckTypeForm = {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: 0.0,
        measureWidth: 0.0,
        measureHigh: 0.0
      }
      this.$refs.truckTypeForm.resetFields()
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.car-models{
   ::v-deep .el-dialog{
    width: 600px;
    border-radius: 8px;
    .el-dialog__header {
      border-radius: 8px;
      background-color: #f3f4f7;
      span{
        color: #000;
      }
    }
    .el-dialog__body {
      padding-right: 60px;
    }
  }
}
</style>
